Uvod u RWD (Responsive web design)

Responsive web design (RWD) opisuje kreiranje mrežnih stranica koje su prilagodljive različitim širinama zaslona. Cilj RWD-a je pružanje najboljeg iskustva pri pregledavanju i korištenju web stranice – jednostavno čitanje sadržaja i navigacija – na različitim širinama zaslona, od desktop monitora do mobilnih uređaja.

Pogledajmo primjer stranice froont.com na različitim veličinama zaslona.

Slika 1. - froont.com stranica na mobilnom uređaju

Slika 2. - Stranica froont.com na tablet uređaju

Slika 3. - Stranica froont.com na desktop računalu

Jednostavnim rječnikom, responsive web design se brine da web stranica izgleda dobro na svim uređajima (desktop monitori, tableti, mobilni uređaji).

Responsive web design koristi CSS (Cascading Style Sheet) i HTML (HyperText Markup Language) kako bi promijenio veličinu, sakrio, smanjio, povećao ili prilagođavao sadržaj za različite veličine ekrana.

Sam termin “Responsive web design” (RWD) je skovao Ethan Marcotte u svibnju 2010. u članku u A list apart gdje je responsive web design definirao kao prilagodljivu mrežu / fleksibilne slike / medija upite.

Prije nego je Ethan Marcotte službeno objavio termin responsive web design pojavljivali su se razni termini (“flexible”, “liquid”, “fluid” i “elastic”) kako bi se opisao raspored web stranice

Stranica izrađena po principima RWD-a se prilagođava vidljivom rasporedu elemenata koristeći fluidne, proporcionalne mreže, fleksibilne slike i CSS3 medija upite (medija queries,@medija)

Koncept prilagodljive mreže (fluid grid) se zasniva na korištenju relativnih mjernih jedinica za elemente stranice kao što su postotci, a ne apsolutne mjerne jedinice poput piksela (pixels) ili točaka (points).

Fleksibilne slike se također mjere u relativnim jedinicama kako bi se spriječilo njihovo prikazivanje ili ispadanje iz elementa u kojem se nalaze.

Media upiti (medija queries) omogućuju stranici da koriste različita CSS pravila koja se temelje na karakteristikama uređaja na kojemu se stranica prikazuje, najčešće se koristi širina preglednika.

Media upiti (media queries)

Dolaskom CSS 2.1 medija upiti su korišteni kako bi se primijenio CSS za ekrane, odnosno digitalnu verziju sadržaja i za print verziju. No, to se promijenilo novim smjernicama u CSS3 kojim je W3C (World Wide Web Consortium) uveo nove standarde pa tako i znatno poboljšao medija upite.

Danas se medija upiti koriste kako bi se dodali različiti stilovi temeljeni na karakteristikama koje odgovaraju danom upitu. Također se može kombinirati nekoliko upita koristeći semantičke operatore kao što su AND i NOT. Moguće karakteristike uključuju width (širina), height (visina), max-width (maksimalna širina), max-height (maksimalna visina), device-height (visina ekrana uređaja), orientation (orijentacija ekrana uređaja: portrait – portret i landscape – pejzaž), aspect-ratio (omjer slike), resolution (rezolucija) i mnoge druge.

Postoje tri načina na koje je moguće implementirati medija upite, a to su:

Koristeći @import kako bi se uvela stilska pravila iz drugih stilskih datoteka:

@import url(stilmw600.css) screen and (min-width: 600px);

Slika 4. - Primjer uvoza CSS datoteke za minimalnu širinu zaslona od 600px

Dodavanje medija upita direktno u stilsku datoteku, što je ujedno i najčešći pristup.

#nav{
float: right;
}

#nav ul{
list-style: none;
}

@media screen and (min-width: 400px) and (orientation: protrait) {

#nav li{
float: right;
margin: 0 0 0 0.5em;
border: none;
}
}

@media screen and (min-width: 800px) {

#nav{
width: 200px;
}

#nav li{
float: left;
margin: 0 0 0 0.5em;
border: none;
}
}

Slika 5. - Primjer medija upita u CSS datoteci

Dodavanjem upita u povezanoj stilskoj datoteci koristeći medija atribut:

<!DOCTYPE html>

<html>
<head>

<title>Ovo je naslov web stranice</title>
<link rel="stylesheet"type="text/css"
media="screen and (max-device-width: 800px)"
href="stilmdw800.css />
</head>
<body>

<p>Ovo je paragraf na web stranici</p>
</body>
</html>

Slika 6. - Primjer povezivanja CSS datoteke sa HTML datotekom koristeći medija atribut

Fleksibilne mreže (flexible grids)

Raspored elemenata temeljen na fleksibilnoj mreži je jedna od okosnica prilagodljivog dizajna. Termin “mreža” (grid) se učestalo koristi, ali ne zahtijeva implementiranje radne okoline (framework) koja se temelji na takvom sustavu. Termin podrazumijeva korištenje CSS-a za pozicioniranje te definiranje margina i prostora među elementima. Raspored (layout) i veličina slova se uobičajeno izražava u pikselima. Problem kod izražavanja veličina u apsolutnim mjernim jedinicama poput piksela je što jedan piksel može biti jedna točka na jednom uređaju ili osam točaka na drugom. Rješenje za lakšu provedbu prilagodljivog dizajna je da se prestanu koristiti apsolutne mjerne jedinice poput piksela za rasporede te da se umjesto toga koriste relativne mjerne jedinice poput postotaka ili em-a.

Koristeći postotak ili em za određivanje veličine slova, širine i margina moguće je pretvoriti apsolutnu veličinu u relativnu. Formula za izračunavanje em-a:

ciljani element / kontekst (nadređeni element) = rezultat

Recimo da je normalan kontekst za veličinu slova u tijelu dokumenta 16 piksela. Ako dizajner odredi da H1 element treba biti veličine 24 piksela, računica je sljedeća:

24 / 16 = 1.5 što znači da će veličina slova H1 elementa biti 1.5em. Jednako vrijedi i za izračun postotka.

h1 {
font-size: 1.5em
}

Slika 7. - Primjer rezultata pretvaranja apsolutne mjerne jedinice u relativnu

Radna okolina (framework)

Radna okolina ili framework je softverska radna okolina dizajnirana kako bi pomogla razvitku web aplikacija, a to uključuje web usluge, web sredstva i web API-je. Radna okruženja potpomažu razvojnim stručnjacima u kreiranju web stranice. Kako točno pomažu?

Radne okoline dolaze sa svojim sustavom mreža (grid) koje razvojni stručnjak ubacuje u kod ne zamarajući se previše sa stilskom datotekom jer većina radnih okolina dolazi sa mnoštvom dokumentacije, pa tako i sa jednostavnim predloškom web stranice te minimaliziranim ili punim css-om. Ove radne okoline obično imaju 12 stupaca, a možete preuzeti i sa 16 ili 18. To su najučestaliji brojevi stupaca u radnim okolinama. Rad sa ovakvim radnim okoline je dodatno olakšan pristupom dokumentaciji na mreži koja sadrži sve elemente, predloške, ikone i sve ostalo što se može naći na tipičnoj web stranici.

Nadalje, radne okoline su uglavnom dizajnirane tako da idu mobile-first. Iz tog razloga je puno lakše i jednostavnije napraviti prilagodljivu web stranicu nego da idete “pješke” i “od jajeta” u borbu sa prilagodljivim web dizajnom.

Neke od radnih okolina su Bootstrap, Skeleton, Foundation i Fluid 960 Grid System.

Slika 8. - Primjer liste napravljene pomoću Bootstrap radne okoline

CSS3 raspored mreže (CSS3 grid layout)

Raspored mreže omogućuje definiranje dijelova u rasporedu pomoću stupaca i redova, raspona, razmaka, prostora od elementa do njegova okvira (padding), mreže predložaka i još mnogo više, provođenje potpunog odvajanja HTML elemenata i CSS-a. Za razliku od HTML tablice, koja je sadržaj stranice, mreža (grid) omogućuje stavljanje temeljnih HTML elemenata u dijelove mreže gdje su odvojeni od stvarnog sadržaja.

Kombiniranje CSS3 mreže i medija upita omogućuje stvaranje kvalitetnog rješenja za izgradnju fluidnih (fluid) i prilagodljivih aplikacija.

Fleksibilne slike i medijski sadržaji (Flexible images and media)

Zadnja stavka i okosnica prilagodljivog web dizajna su fleksibilne slike i medijski sadržaji. U suštini ovaj pristup omogućuje slikama i drugim medijskim sadržajima različito učitavanje ovisno u uređaju koji korisnik koristi. Fleksibilnost slika i medijskih sadržaja se može jednostavno ostvariti određivanjem veličine ili koristeći CSS overflow svojstvo.

Određivanje veličine je poprilično jednostavno za implementirati u kod kako za slike tako i za druge medijske sadržaje. Moguće je namjestiti maksimalnu širinu (max-width) elementa na 100%. Nakon namještanja veličine, preglednik će sam smanjiti ili proširiti sliku ovisno o kontejneru u kojemu se ona nalazi. Potrebno je, dakako, pripaziti i na to da se koristi najbolja moguća kvaliteta i veličina slika te samo prepustiti da CSS odredi potrebnu veličinu.

img {
max-width: 100%;
}

Slika 9. - Primjer namještanja maksimalne širine fleksibilne slike

Alternativa određivanju veličine je rezanje slike pomoću CSS-a. Primjerice, korištenje overflow: hidden omogućuje dinamično rezanje slike kako bi ona stala u kontejner kada se kontejner prilagođava novoj rezoluciji ekrana.

No, sve ove mogućnosti ponekad i nisu dovoljne. Misleći prvenstveno na iskustvo korisnika prilikom pregledavanja sadržaja web stranice potrebno je uzeti u obzir i korisnikove mogućnosti. Ovdje se misli i na podatkovni promet koji je korisniku dostupan te potreban podatkovni promet kako bi se sama stranica učitala. Kako bi se smanjila potrošnja podatkovnog prometa i povećalo zadovoljstvo korisnika pri pregledavanju sadržaja ponekad je dobra ideja da se koristi slika manje rezolucije ili da se slika uopće ne koristi.

Želim znati više!

API (Aplikacijsko programsko sučelje) ili sučelje za programiranje aplikacija je skup određenih pravila i specifikacija koje programeri slijede kako bi se služili uslugama ili resursima operacijskog sustava ili nekog drugog složenog programa kao standardne biblioteke rutina (funkcija, procedura, metoda), struktura podataka, objekata i protokola. Budući da je API u određenoj mjeri komplicirani koncept, ukratko ćemo objasniti njegove komponente.

Aplikacija – Poprilično je jasno što je aplikacija tako da nema potrebe detaljno objašnjavati pojam. Aplikacije su alati, igrice, društvene mreže i bilo koji drugi softver koji svakodnevno koristimo kako na našim pametnim uređajima tako i na računalu.

Programiranje – Programiranje je način na koji razvojni stručnjaci kreiraju softver koji nam olakšava život

Sučelje – Sučelje je određena granica koju dijele dvije aplikacije ili programi koje omogućuje međusobno komuniciranje.

Google Maps API omogućava korištenje Google-ovih karata za vlastite, kreativne, ideje.

Google-ova karta nakon obrade pretvorena je u funkcionalnu web stranicu, a primjer možete pogledati ovdje

Zadaci za vježbanje

Koristeći se nekom radnom okolinom, možete ju odabrati po želji, kreirajte prilagodljivu web stranicu sa različitim rasporedom sadržaja na stranici za desktop računala, tablet i mobilni uređaj

Primjer kako bi stranice mogle izgledati:

Slika 10. - Primjer rasporeda elemenata na mobilnom uređaju

Slika 11. - Primjer rasporeda elemenata na tablet uređaju

Slika 12. - Primjer rasporeda elemenata na desktop računalu

Literatura

Marcotte, Ethan. Responsive web design, 2010.

http://andreehansson.se/the-basics-of-jquery/

HTML responsive web design.

http://www.w3schools.com/html/html_responsive.asp

Pettit, Nick. Beginner’s guide to responsive web design, 2012.

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

Responsive web dizajn.

http://media-x.hr/responsive-web-dizajn/

De Graeve, Katrien. HTML5 - responsive web design, 2011.

https://msdn.microsoft.com/en-us/magazine/hh653584.aspx

Knight, Kayla. Responsive web design: what is it and how to use it, 2011.

https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-webdesign/

ePage, Pete. Responsive web design basics.

https://developers.google.com/web/fundamentals/design-andui/responsive/fundamentals/

Pintar, Mario. Responsive web design, prestiž ili potreba, 2013.

https://www.avalon.hr/blog/2013/11/responsive-web-design-prestiz-ili-potreba/

Bootstrap.

http://getbootstrap.com/